<template>
<div class="page"  ref="gun">
  <div class='nav'>
    <div class="input_div flex_ac" @click="$back() ">
      <van-icon class="ml6" name="arrow-left" size="26" color="#000"/>
      <div class="nav_title">客服中心</div>
    </div>
	</div>
	<div class="h40"></div>
	<div class="box box1">
		<div class="title flex_sb flex_ac">
			服务中心
			<div class="more">服务时间：工作日9:00-22:00</div>
		</div>
		<div class="h4"></div>
		
		<div class="flex_sb flex_w">
			<div class="xx_item flex_ac" @click="toPhone">
				<img src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/kf_icon1.png" mode=""></img>
				<div class="">
					<div class="xx_title mb6">在线客服</div>
					<div class="xx_text">及时解决您的问题</div>
				</div>
			</div>
			
			
			<div class="xx_item flex_ac" @click="toPhone">
				<img src="http://guizhou-oss.oss-cn-guiyang-gzdata-d01-a.res.gzdata.com.cn/qiji/kf_icon2.png" mode=""></img>
				<div class="">
					<div class="xx_title mb6">电话客服</div>
					<div class="xx_text">400-962-5108</div>
				</div>
			</div>
		</div>
	</div>
	
	<div class="box box2">
		<div class="title title1 flex_sb flex_ac">
			常见问题
			<!-- <div class="more flex_ac">
				全部
				<van-icons type="right" size="14" color="#999"></van-icons>
			</div> -->
		</div>
		
		<van-collapse v-model="activeNames" accordion>
			<van-collapse-item :name="k" v-for="i,k in list" :key="k">
				<template #title>
					<div class="flex_ac">
						<div class="www">问</div>
						<div class="ttt">{{i.name}}</div>
					</div>
				</template>
        <div class="flex">
          <div class="ddd">答</div>
          <div class="ttt1">{{i.answer}}</div>
        </div>
			</van-collapse-item>
		</van-collapse>
	</div>
</div>
</template>

<script>
import { getQuestionList } from '@/api/api'
export default{
	data(){
    return {
      activeNames:0,
			list:[]
		}
	},
	created(){
		getQuestionList({limit:100}).then(res=>{
			this.list = res.data.data
		})
	},
	methods:{
		toPhone(){
		
		},
		chat(){
			
		},
		yijian(){
			
		}
	}
}
</script>

<style scoped lang="scss">
.nav{
	width: 100%;
	position: fixed;
	top: 0;
	left: 0;
  height: 40px;
	background-color: rgba($color: #fff, $alpha: 1);
	z-index: 10;
	transition: all 0.5s;
}
.input_div{
	width: 100%;
  height: 100%;
	.nav_title{
		font-weight: 500;
		font-size: 18px;
		color: #000;
	}
}
.page{
	height:100%;
	width:100%;
	background:#f4f4f4;
  overflow: auto;
}
.box{
	margin:5px;
	background: #FFFFFF;
	border-radius: 3px;
	padding:15px 10px;
}
.box1{
	margin-top:4px;
}
.box2{
	margin:5px;
	background: #FFFFFF;
	border-radius: 3px;
	padding:15px 0px;
  .title1{
    margin-left: 10px !important;
  }
}
.title{
	font-weight: bold;
	font-size: 15px;
	color: #000000;
	.more{
		font-size: 12px;
		color: #666666;
		font-weight:400;
		line-height:12px;
	}
}
.xx_item{
	padding:0 10px !important;
	background: #F0F8FF !important;
	border-radius: 3px !important;
	width:calc(50% - 25px) !important;
	height:55px !important;
	margin-top:10px !important;
	img{
		width:22px !important;
		height:22px !important;
		margin-right:12px;
	}
	.xx_title{
		font-size: 14px;
		color: #000000;
		text-align:left
	}
	.xx_text{
		font-size: 12px;
		color: #666666;
	}
}

.www{
	min-width: 15px;
	max-width: 15px;
	width: 15px;
	height: 15px;
	text-align: center;
	line-height:15px;
  background: #FFF8F2;
	border-radius: 2px;
  border: 1px solid #EB7418;
	font-size: 12px;
	color: #EB7418;
	margin-right:10px;
}

.ddd{
	min-width: 15px;
	max-width: 15px;
	height: 15px;
	text-align: center;
	line-height:15px;
  background: #F0F8FF;
	border-radius: 2px;
  border: 1px solid #148AF2;
	font-size: 12px;
	color: #138AF2;
	margin-right:10px;
  display: inline-block;
}
.ttt{
	font-size: 14px;
	color: #000000;
  display: inline-block;
}
.ttt1{
	font-weight: 400;
	font-size: 13px;
  display: inline-block;
}
</style>